function Render() {}

$.extend(Render.prototype, {
    init: function(list, type) {
        if (type === "nav_first_list") {
            return this.renderNavFirstList(list);
        } else if (type === "home-brand-main") {
            return this.renderPopCategoryList(list);
        } else if(type === "left"){
            return this.renderLeftList(list);
        } else if(type === "mid"){
            return this.renderMidList(list);
        } else if(type === "right"){
            return this.renderRightList(list);
        } else if(type === "carrousel-container"){
            return this.renderCarrouselList(list);
        } else if(type === "floors"){
            return this.renderFloorlList(list);
        }
    },
    renderNavFirstList: function(list) {
        var html = "";
        var html_2 = "";
        var html_4 = "";

        $.each(list.itemCategory, function(index, item) {
            html_2 += `
            <li class="sub-category-item">
                <img src="${item.iconUrl}" alt="二级分类图标" class="sub-category-icon">
                <span class="display-block sub-category-name" title="${item.name}">${item.name}</span>
            </li>
            `;
        })

        html += `<li class="main-category-item">
                    <span>
                        <span class="item-name">商品分类</span>
                        <span class="triangle-top"></span>
                    </span>
                    <div class="sub-category-container">
                        <ul class="sub-category-list fix-width">` +
            html_2 +
            `</ul>
                    </div>
                </li>`;
        $.each(list.webShopItemIpCategory, function(index, item) {
            var html_3 = "";
            $.each(item.webShopItemIp, function(index, item) {

                html_3 += `
                <li class="sub-category-item">
                    <img src="${item.iconUrl}" alt="二级分类图标" class="sub-category-icon">
                    <span class="display-block sub-category-name" title="${item.name}">${item.name}</span>
                </li>
                `
            })

            html += `
            <li class="main-category-item">
                <span>
                    <span class="item-name">${item.name}</span>
                    <span class="triangle-top"></span>
                </span>
                <div class="sub-category-container">
                    <ul class="sub-category-list fix-width">` + html_3 +

                `</ul>
                </div>
            </li>
                `;
        });

        $.each(list.webShopBrand, function(index, item) {
            html_4 += `
            <li class="sub-category-item">
                <img src="${item.iconUrl}" alt="二级分类图标" class="sub-category-icon">
                <span class="display-block sub-category-name" title="${item.name}">${item.name}</span>
            </li>
            `
        })

        html += `
        <li class="main-category-item">
        <span>
            <span class="item-name">品牌专区</span>
            <span class="triangle-top"></span>
        </span>
        <div class="sub-category-container">
            <ul class="sub-category-list fix-width">` + html_4 +

            `</ul>
        </div>
    </li>
        `;

        return html;
    },
    renderPopCategoryList: function(list) {

        this.html = "";
        this.list = list;
        this.count = 0;

        list = list.filter(function(item, index) {
            return index >= 0 && index <= 3;
        })
        return this.strBuild(list);
    },
    strBuild: function(list) {
        this.html = "";
        $.each(list, function(index, item) {
            
            this.html += `
            <div class="brand-item">
                <div class="image-container" style="background-image: url(${item.primaryUrl})"></div>
                <div class="brand-name">${item.name}</div>
            </div>
            `;
        }.bind(this));
        return this.html;
    },
    showOthers: function() {       
        this.count++;
        if (this.count >= 4) this.count = 1;

        var _list = this.list.filter(function(item, index) {
            if (this.count === 3) return index >= (this.count * 4) || index <= 2;
            else return index >= (this.count * 4) && index <= (this.count * 4 + 3);
        }.bind(this));
        var html_change = this.strBuild(_list);
        $(".home-brand-main").html(html_change);
    },
    renderLeftList : function(list){
        var html = "";
        html += `
        <span class="hot-item first" style="background:${list[0].backgroundColor};">
            <span class="image-container" style="background-image:url('${list[0].listPicUrl}');"></span>
            <span class="content-container">
                <span class="prod-name">${list[0].itemName}</span>
                <span class="prod-desc">${list[0].itemSale}</span>
                <span class="prod-price">${list[0].itemPrice}</span>
            </span>
        </span>
        <span class="hot-item second" style="background:${list[1].backgroundColor};">
            <span class="image-container" style="background-image:url('${list[1].listPicUrl}');"></span>
            <span class="content-container">
                <span class="prod-name">${list[1].itemName}</span>
                <span class="prod-desc">${list[1].itemSale}</span>
                <span class="prod-price">${list[1].itemPrice}</span>
            </span>
        </span>
        `;
        return html;
    },
    renderMidList : function(list){
        var html = "";
        html += `
        <span class="hot-item third" style="background:${list[2].backgroundColor};">
            <span class="image-container" style="background-image:url('${list[2].listPicUrl}');"></span>
            <span class="content-container">
                <span class="prod-name">${list[2].itemName}</span>
                <span class="prod-desc">${list[2].itemSale}</span>
                <span class="prod-price">${list[2].itemPrice}</span>
            </span>
        </span>
        `;
        return html;
    },
    renderRightList : function(list){
        var html = "";
        html += `
        <span class="hot-item fourth" style="background:${list[3].backgroundColor};">
            <span class="image-container" style="background-image:url('${list[3].listPicUrl}');"></span>
            <span class="content-container">
                <span class="prod-name">${list[3].itemName}</span>
                <span class="prod-desc">${list[3].itemSale}</span>
                <span class="prod-price">${list[3].itemPrice}</span>
            </span>
        </span>
        <span class="hot-item fifth" style="background:${list[4].backgroundColor};">
            <span class="image-container" style="background-image:url('${list[4].listPicUrl}');"></span>
            <span class="content-container">
                <span class="prod-name">${list[4].itemName}</span>
                <span class="prod-desc">${list[4].itemSale}</span>
                <span class="prod-price">${list[4].itemPrice}</span>
            </span>
        </span>
        `;
        return html;
    },
    renderCarrouselList : function(list){
        var html = "";
        $.each(list,function(index,item){
            html += `
            <a class="carrousel-item new">
                <div class="img-container prod-img">
                    <img src="${item.listPicUrl}" alt="商品图片">
                </div>
                <span class="prod-name">${item.name}</span>
                <span class="prod-desc" title="${item.simpleDesc}">${item.simpleDesc}</span>
                <span class="prod-price">
                    ￥${item.channelPric}
                </span>
            </a>
            `
        });
        return html;
    },
    renderFloorlList : function(list){

        var html = "";
        $.each(list,function(index,item){
            var html_li = "";
            var html_span = "";

            $.each(item.itemCategoryVO.subCategoryList,function(index,item){
                html_li += `
                <li>
                    <span>${item.name}</span>
                    &nbsp;&nbsp;
                    /
                </li>
                `;
            });

            html_span += `<span class="show-prev floor"></span>`;

            var _list = item.indexItemList.filter(function(item, index) {
                return index >= 0 && index <= 3;
            })

            $.each(_list,function(index,item){
                html_span += `
                <span class="carrousel-item floor">
                    <span class="img-container">
                        <span class="hover-enlarge">
                            <img src="${item.listPicUrl}" alt="图片">
                        </span>
                    </span>
                    <span class="prod-name">${item.name}</span>
                    <span class="prod-price">
                        ￥${item.channelPrice}
                    </span>
                </span>
                `;
            });

            html_span += `<span class="show-next floor"></span>`;

            html += `
            <div class="floor-container">
            <div class="floor-top">
                <div class="common-section-header" style="background-image:url('${item.itemCategoryVO.iconUrl}');">
                    <span class="title">${item.itemCategoryVO.name}</span>
                    <span class="view-more float-right">查看更多&nbsp;&nbsp;</span>
                    <ul class="subCategory-info float-right">` + html_li + `</ul>
                </div>
                <div>
                    <img src="${item.itemCategoryVO.bannerUrl}" alt="楼层主图" class="floor-banner clickable">
                </div>
            </div>
            <div>
                <div class="carrousel-container">` + html_span + `</div>
            </div>
        </div>
            `;
        })
        return html;
    },
    changeList : function(evt){
        var e = evt || window.event;
        var target = e.target || e.srcElement;
        
        var 
    }
})

export default new Render();